import type { LTR } from 'element-plus/lib/components/virtual-list/src/defaults.js';
<template>
  <div class="table-column-group">
    <div class="table-column-item" v-for="(obj, i) in arr" :key="i">
      <el-input
        class="value"
        :model-value="obj.name"
        @input="change('name', $event, i)"
        placeholder="输出值"
      />
      <el-input
        class="value"
        :model-value="obj.rule"
        @input="change('rule', $event, i)"
        placeholder="规则"
      />
      <el-button
        type="danger"
        @click="remove(i)"
        text
        circle
        style="cursor: pointer; margin-left: 30px"
      >
        <i class="icon iconfont" style="cursor: pointer">&#xe718;</i>
      </el-button>
    </div>
    <el-button type="primary" text @click="add">添加参数</el-button>
    <p class="form-designer-tips">
      <i class="icon iconfont">&#xe77e;</i>规则排序按优先级排列
    </p>
    <p class="form-designer-tips">
      <i class="icon iconfont">&#xe77e;</i>规则输入示例： =&gt; 90 、 &lt; 100 、== '优秀'
    </p>
  </div>
</template>

<script setup lang="ts">
import { initInputConfig } from '../utils'
interface CountData {
  key: string
  id: string
}
const emits = defineEmits(['open', 'change', 'update:modelValue'])
const props = defineProps({
  modelValue: {
    type: Array as () => CountData[],
    default() {
      return []
    }
  }
})
const arr = ref<CountData[]>([])
// 新增
const add = () => {
  const key = 'val' + Number(arr.value.length + 1)
  arr.value.push(initInputConfig(key))
}
// 改变
const change = (key: string, value: string | boolean | string, index: number) => {
  arr.value = arr.value.map((el: any, i: number) => {
    if (i === index) {
      el[key] = value
    }
    return el
  })
  setValue()
}
// 移除
const remove = (index: number) => {
  arr.value = arr.value.filter((el, i) => {
    return i !== index
  })
  setValue()
}
const setValue = () => {
  emits('update:modelValue', arr.value)
  emits('change', arr.value)
}
watch(props, () => {
  arr.value = props.modelValue
})
onMounted(() => {
  arr.value = props.modelValue
})
</script>

<style lang="scss" scoped>
.table-column-group {
  width: 100%;
  .table-column-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    i {
      cursor: move;
      margin-right: 5px;
    }
    .value {
      margin-right: 5px;
      color: #333333;
    }
  }
}
</style>
